@charset "utf-8";

@import url("https://cdn.bootcdn.net/ajax/libs/normalize/8.0.1/normalize.min.css");

:root{
	--c-black: rgb(51,51,51);
	--c-text-1: #fff;
	--c-white-1: #fff;
	--c-white-2: #f1f1f1;
	--c-blue-1: #0036a0;
	--c-blue-2: #032a79;
	--c-blue-3: #012573;
	--c-red-1: #ff1100;
	--c-red-2: #cb4117;
	--c-red-3: #962121;
	
	font-size: 3vw;
	color: var(--c-black);
	background-color: var(--c-white-1);
}

.container{
	width: 100%;
	min-height: 100vh;
	position: relative;
}

.container>header,.container>header>h1{
	padding: 0;
	margin: 0;
	width: 100%;
	height: 4.5rem;
	background-color: var(--c-blue-2);
	color: var(--c-white-1);
	text-align: center;
	line-height: 4.5rem;
	font-size: 1.6rem;
	letter-spacing: .3rem;
	position: relative;
	overflow: hidden;
}
.container>header>h1{
	background-color: rgba(0,0,0,0);
	z-index: 1;
}

.container>header::before,.container>header::after{
	content: "";
	position: absolute;
	width: 9rem;
	height: 9rem;
	border-radius: 9rem;
	background-color: var(--c-blue-3);
	top: -1rem;
	left: 1rem;
	z-index: 0;
}
.container>header::after{
	top: -4rem;
	width: 16rem;
	left: auto;
	right: 1rem;
}

.back{
	position: absolute;
	width: 1rem;
	z-index: 2;
}

.back::before{
	content: "〈";
	cursor: pointer;
}
.table{
	width: 100%;
	border-spacing: 0;
}
.table td,.table th{
	text-align: center;
	border-right: solid .1rem var(--c-blue-1);
	padding: .5rem;
	position: relative;
}
.table td:last-child{
	border-right: none;
}
.table>thead th{
	background-color: var(--c-blue-1);
	color: var(--c-text-1);
	font-size: 1.2rem;
	padding: 1rem 0.5rem;
}
.table>thead th img{
	position: absolute;
	top: 0;
	left: .3rem;
	width: 2rem;
	height: 2rem;
}
.table td:nth-child(2){
	text-align: left;
}
.table>tbody>tr:nth-child(2n){
	background-color: var(--c-wihte-2);
}
.table>tbody img{
	width: 2.3rem;
	line-height: 2.3rem;
	display: inline-block;
	vertical-align: middle;
}

/* 排名计数器 */
.table>tbody>tr{
	counter-increment: count;
}
.table>tbody>tr>td:nth-child(1)::before{
	content: counter(count);
}
.table>tbody>tr:nth-child(1){
	color: var(--c-red-1);
	font-weight: bold;
}
.table>tbody>tr:nth-child(2){
	color: var(--c-red-2);
	font-weight: bold;
}
.table>tbody>tr:nth-child(3){
	color: var(--c-red-3);
	font-weight: bold;
}
@media screen and (min-width:600px) {
	.container{
		width: 600px;
		margin: 0 auto;
	}
	:root{
		font-size: 18px;
	}
}